import React, { useReducer,useRef } from 'react';
import { Stpdiv } from './PubStyled'
import  reducer  from './reducer'

const inittaliState = {
    num: 0
}

const Step = (props) => {

    let inpt = useRef( null )
    let [state, dispatch] = useReducer(reducer,inittaliState)

    return (
        <Stpdiv>
            <span className='yo-ico' 
                onClick={ ()=>{
                    if( state.num === 0 ) return
                    dispatch( { type:'delete'})
                    inpt.current.value = state.num -1
                } }
            >&#xe615;</span >
            <input type="text" defaultValue={0} ref = { inpt } onInput={ (e)=>{ dispatch({type: 'inputValue',value:e.target.value}) }  } />
            <span className='yo-ico' 
                onClick={ ()=>{
                    dispatch( { type:'add'})
                    inpt.current.value = state.num + 1
                } }
            >&#xe620;</span>
        </Stpdiv>
    );
}

export default Step;